/*
 * @Author: hongbin
 * @Date: 2022-01-03 18:32:01
 * @LastEditors: hongbin
 * @LastEditTime: 2022-01-04 15:19:52
 * @Description: city chart
 */
import { FC, ReactElement, useEffect, useRef, useState } from "react";
import ReactEcharts from "echarts-for-react";
import * as echarts from "echarts";
import { provinces } from "./jsonPath";

export const option = {
  title: {
    text: "城市地图",
    // subtext: "Data from Wikipedia",
    // sublink:
    //   "http://zh.wikipedia.org/wiki/%E9%A6%99%E6%B8%AF%E8%A1%8C%E6%94%BF%E5%8D%80%E5%8A%83#cite_note-12",
  },
  tooltip: {
    trigger: "item",
    formatter: "{b}<br/>{c} (p / km2)",
  },
  // toolbox: {
  //   show: true,
  //   orient: "vertical",
  //   left: "right",
  //   top: "center",
  //   feature: {
  //     dataView: { readOnly: false },
  //     restore: {},
  //     saveAsImage: {},
  //   },
  // },
  visualMap: {
    min: 800,
    max: 50000,
    text: ["High", "Low"],
    realtime: false,
    calculable: true,
    inRange: {
      color: ["lightskyblue", "yellow", "orangered"],
    },
  },
  series: [
    {
      name: "香港18区人口密度",
      type: "map",
      map: "xx",
      zoom: 1, //当前视角的缩放比例
      roam: true, //是否开启平游或缩放
      scaleLimit: {
        //滚轮缩放的极限控制
        min: 1,
        max: 2,
      },
      label: {
        show: true,
      },
      data: [
        { name: "中西区", value: 20057.34 },
        { name: "湾仔", value: 15477.48 },
        { name: "东区", value: 31686.1 },
        { name: "南区", value: 6992.6 },
        { name: "油尖旺", value: 44045.49 },
        { name: "深水埗", value: 40689.64 },
        { name: "九龙城", value: 37659.78 },
        { name: "黄大仙", value: 45180.97 },
        { name: "观塘", value: 55204.26 },
        { name: "葵青", value: 21900.9 },
        { name: "荃湾", value: 4918.26 },
        { name: "屯门", value: 5881.84 },
        { name: "元朗", value: 4178.01 },
        { name: "北区", value: 2227.92 },
        { name: "大埔", value: 2180.98 },
        { name: "沙田", value: 9172.94 },
        { name: "西贡", value: 3368 },
        { name: "离岛", value: 806.98 },
      ],
      // 自定义名称映射
      nameMap: {
        "Central and Western": "中西区",
        Eastern: "东区",
        Islands: "离岛",
        "Kowloon City": "九龙城",
        "Kwai Tsing": "葵青",
        "Kwun Tong": "观塘",
        North: "北区",
        "Sai Kung": "西贡",
        "Sha Tin": "沙田",
        "Sham Shui Po": "深水埗",
        Southern: "南区",
        "Tai Po": "大埔",
        "Tsuen Wan": "荃湾",
        "Tuen Mun": "屯门",
        "Wan Chai": "湾仔",
        "Wong Tai Sin": "黄大仙",
        "Yau Tsim Mong": "油尖旺",
        "Yuen Long": "元朗",
      },
    },
  ],
};

interface IProps {
  name: string;
}

const CityMap: FC<IProps> = ({ name: a }): ReactElement => {
  const ref = useRef<ReactEcharts>(null);
  const name = "HK";
  const path = provinces[name];
  const [state, setState] = useState(false);

  console.log("path:", path);

  useEffect(() => {
    // echarts.registerMap(
    //   "HK",
    //   require("china-map-json-h/mapjson/data-1461584707906-r1hSmtsx.json")
    // );
    // @ts-ignore
    // console.log("registerMap", ref.current);
    // setState(true);
  }, []);

  //   const option = {
  //     backgroundColor: "#faa",
  //     title: {
  //       left: "center",
  //       right: 10,
  //       text: name,
  //       textStyle: {
  //         color: "#fff",
  //       },
  //     },
  //     // tooltip: {
  //     //   trigger: "item",
  //     //   formatter: function (params: any) {
  //     //     const { data, name: cityName } = params.data;
  //     //     const { is_first_city } = data;
  //     //     let html = `${cityName} (${is_first_city === 0 ? "非一线" : "一线"})`;
  //     //     // @ts-ignore
  //     //     for (let key of NAME_MAP) {
  //     //       html += `<br>${data[key]}`;
  //     //     }
  //     //     return html;
  //     //   },
  //     // },
  //     // legend: {
  //     //   orient: "horizontal",
  //     //   y: "bottom",
  //     //   x: "center",
  //     //   textStyle: {
  //     //     color: "#fffae5",
  //     //   },
  //     // },
  //     geo: {
  //       map: name,
  //       zoom: 0.8,
  //       scaleLimit: {
  //         min: 0.8,
  //         max: 4,
  //       },
  //       roam: true,
  //       itemStyle: {
  //         areaColor: "#333",
  //         borderColor: "#000",
  //       },
  //       emphasis: {
  //         label: {
  //           show: false,
  //         },
  //         itemStyle: {
  //           areaColor: "#60758e",
  //         },
  //       },
  //     },
  //     series: [
  //       {
  //         name: "测试数据",
  //         type: "scatter",
  //         coordinateSystem: "geo",
  //         data: [],
  //         // 圆点大小
  //         symbolSize: function (val: any) {
  //           return Math.log(val[2]) * 2;
  //         },
  //         itemStyle: {
  //           color: "#9c27b0",
  //         },
  //       },
  //     ],
  //   };

  return (
    <ReactEcharts
      ref={ref}
      option={{ option }}
      style={{ width: "100%", height: "100%" }}
    />
  );
};

export default CityMap;
